body{
    background-color: #3c3c3c;
}
/*导航栏*/
.user-head{
    height:35px;
    width: 35px;
    margin-top: 7px;
    border-radius: 50%;
    box-shadow: rgb(0 0 0) 1px 1px 12px 1px;
}

.nav-title{
    font-weight: bold;
    font-size: 20px;
}
.nav-title:hover {
    font-weight: bold;
    font-size: 20px;
}
.nav_bottom{
      width: 100%;
}
/*文章主界面*/
.article-big-box{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.article-box{
    width: 1700px;
    display: flex;
}

/*左侧边栏*/
.article_side_left_box{
      display: flex;
     flex-direction: column;
     width: 310px;
    padding-top: 50px;
     margin-top: 30px;
     position: fixed;
    margin-left: 20px;
    border-radius: 10px;
}
.article-author-box{
     width: 100%;
     height: 450px;
     background-color: white;
     margin-bottom: 20px;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
}
.author-bottom-box{
    width: 100%;
    height: 90px;
    background-color: white;
    border-radius: 10px;
}
.author-title-box{
     width: 100%;
    min-height: 45px;
    background-color: white;
    border-radius: 10px;
}
.author-title{
     font-size: large;
    font-weight: bold;
     margin-left: 15px;
     margin-top: 8px;
     height: 35px;
}
.author-avatar-box{
     width: 100%;
     height: 190px;
    display: flex;
     justify-content: center;
     align-items: center;
}
.author-avatar{
     height: 150px;
     width: 150px;
    border-radius: 50%;
     margin-top: 10px;
}
.hr-line{
     width: 100%;
     height: 3px;
      background-color: #3c3c3c;
}
.author-name-box{
     width: 100%;
     height: 50px;
     text-align: center;
     font-weight: bold;
     font-size: 30px;
}
.author-btn-box{
    width: 100%;
    height: 60px;
     display: flex;
    justify-content: center;
    align-items: center;
}
.author-btn1{
     width: 150px;
     height: 40px;
     background-color: #fc5531;
     color: white;
    border-radius: 25px;
     border: none;
     font-size: large;
     font-weight: bold;
}
.author-btn2{
    width: 150px;
    height: 40px;
    background-color: #a8a8a8;
    color: black;
    border-radius: 25px;
    border: none;
    font-size: large;
    font-weight: bold;
}
.author-success{
     width: 100%;
     height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 15px;
}
.success-item-box{
    height: 75px;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: large;
    font-weight: bold;
}
.success-item-info{
    color:#999aaa;;
}
/*正文部分*/
.article-content-box{
      width: 920px;
      /*background-color: white;*/
      border-radius: 10px;
      margin-left: 340px;
      margin-top: 80px;
      display: flex;
      flex-direction: column;
}
.article-base-info-box{
    width: 100%;
   background-color: white;
    border-radius: 10px;
}
.article-title-box{
     width: 100%;
     height: 65px;
     display: flex;
    padding-top: 10px;
    padding-left: 10px;
}
.is-original-box{
    height:50px;
    width: 90px;
    background-color: #fc5531;
    border-radius: 10px;
    font-weight: bold;
    font-size: 27px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.article-title{
    height: 100%;
    max-height: 400px;
    font-weight: bold;
    font-size: 30px;
}
.article-info-big-box{
      width: 100%;
      height: 85px;
      display: flex;
      padding: 10px;
      justify-content: center;
      align-items: center;
}
.article-info-box{
     width: 100%;
     height: 100%;
     background-color: #e1e1e1;
    box-shadow: rgb(0 0 0) 1px 1px 4px 1px;
     padding-top: 3px;
     padding-left: 5px;
}
.article-time{
    font-weight: bold;
}
.article-info{
    height: 40px;
    max-width: 600px;
    display: flex;
    font-weight: bold;
    padding-top: 5px;
}
.column-title{
    width: 70px;
}
.column-item{
    border: black solid 1px;
    margin-right: 5px;
    background-color: #fff7d1;
    max-width: 120px;
    height: 25px;
}
.label-item{
    border: black solid 1px;
    margin-right: 5px;
    background-color: #fff7d1;
    max-width: 120px;
    height: 25px;
}
.column-list{
    display: flex;
}
.label-list{
    display: flex;
}
.article-main-content-box{
    width: 100%;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
.article-content{
    width: 100%;
}

/*右侧边栏*/
.article-side-right-box{
    display: flex;
    flex-direction: column;
    width: 300px;
    padding-top: 80px;
    position: fixed;
    margin-left: 1270px;
}
.author-column-box{
    width: 100%;
    height: 500px;
    background-color: white;
    border-radius: 10px;
}
.column_list{
    width: 100%;
    height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 10px;
}
.side_column_item{
    width: 100%;
    height: 40px;
    display: flex;
   justify-content: flex-end;
    margin-bottom: 10px;
}
.side_column_name{
    font-size: 16px;
    font-weight: bold;
    margin-right: 130px;
    max-width: 120px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100px;
    padding-bottom: 13px;
}
.side_column_name a{
    text-decoration: none;
    color: black;
}
.side_column_name a:hover{
     color: #fc5531;
     text-decoration: none;
}
.side_column_blog_count{
     font-weight: bold;
    margin-right: 3px;
    display: flex;
    justify-content: flex-end;
    width: 10px;
    color: #999999;
}
.side_column_title{
    width: 10px;
    margin-right: 25px;
    color: #999999;
}
.article-comment-box{
    width: 100%;
    border-radius: 10px;
    margin-top: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    margin-bottom: 50px;
}
.article-operation-box{
     width: 100%;
     margin-top: 10px;
    box-shadow: rgb(0 0 0) 1px 1px 7px 1px;
     height: 50px;
    display: flex;
}
.operation-support{
    color: #fc5531;
    width: 30px;
    height: 30px;
    margin-left: 735px;
    margin-top: 10px;
}
.operation-collection{
    color: #fc5531;
    width: 30px;
    height: 30px;
    margin-left: 15px;
    margin-top: 10px;
}
.support-icon {
    height: 100%;
    width: 100%;
}
.collection-icon-box-icon{
    height: 100%;
    width: 100%;
}
.comment-icon-box-icon{
    height: 100%;
    width: 100%;
}
.operation-comment{
    color: #fc5531;
    width: 27px;
    height: 27px;
    margin-left: 15px;
    margin-top: 13px;
}
.operation-info{
    margin-top: 17px;
    margin-left: 7px;
    font-weight: bold;
}
.write-comment-box{
     width: 100%;
     height: 120px;
     display: flex;
     margin-bottom: 30px;
}
.write-comment-avatar-box{
     width: 45px;
     height: 45px;
     margin-left: 10px;
}
.write-comment-avatar-img{
     width: 100%;
     height: 100%;
     border-radius: 50%;
}
.write-comment-in-box{
      height: 100%;
      width: 100%;
      display: flex;
      padding-right: 25px;
      margin-left: 7px;
}
.write-comment-input-box{
     width: 100%;
     height: 120px;
     display: flex;
}
.write-comment-input{
     width: 770px;
     height: 130px;
     border-radius: 15px;
     border: none;
     background-color: #eaeaea;
     padding-left: 10px;
     padding-top: 5px;
     resize: none;
     white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}
.write-comment-btn-box{

     width: 60px;
     height: 50px;
}
.write-comment-btn{
    background-color: #fc5531;
    color: white;
    border-radius: 25px;
    border: none;
    width: 70px;
    height: 35px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    padding-top: 6px;
}
.show-comment-box{
     width: 100%;
     min-height: 30px;
}
.comment-list{
     width: 100%;
     display: flex;
    flex-direction: column;
     padding-left: 14px;
     padding-right: 14px;
}
.comment-item{
     width: 100%;
     min-height: 80px;
     display: flex;
     flex-direction: column;
     border-bottom: #727272 solid 1px;
     margin-bottom: 10px;
     padding-bottom: 10px;
     padding-top: 2px;
}
.root-comment-container{
      width: 100%;
      min-height: 70px;
      display: flex;
      margin-bottom: 7px;
}
.sub-reply-container{
     width: 100%;
     padding-left: 45px;
}
.root-comment-avatar-box{
     width: 45px;
     height: 45px;
}
.root-comment-avatar{
      height: 100%;
      width: 100%;
      border-radius: 50px;
}
.root-info-box{
     width: 100%;
     min-height: 70px;
     margin-left: 12px;
     display: flex;
     flex-direction: column;
}
.root-nickname{
     font-weight: bold;
}
.root-content{
    margin-top: 3px;
    width: 100%;
    min-height: 23px;
    padding-right: 80px;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
}
.root-other-box{
     width: 100%;
     min-height: 25px;
     display: flex;
}
.root-time{
     color: #999999;
}
.root-reply{
      margin-left: 20px;
      cursor: pointer;
}
.root-reply:hover{
      color: #fc5531;
}
.sub-reply-avatar-box{
    height: 35px;
    width: 35px;
}
.sub-reply-avatar{
    width: 100%;
    height: 100%;
    border-radius: 50px;
}
.sub-reply-list{
     width: 100%;
     display: flex;
     flex-direction: column;
}
.sub-reply-item{
    width: 100%;
    display: flex;
    margin-bottom: 10px;
}
.sub-reply-info-box{
     width: 100%;
     display: flex;
     flex-direction: column;
}
.sub-reply-title{
     width: 100%;
     display: flex;
     margin-left: 10px;
}
.sub-reply-from-user{
     font-weight: bold;
     margin-right: 10px;
}
.sub-reply-to-user{
    font-weight: bold;
    margin-left: 10px;
}
.sub-reply-content{
    margin-left: 10px;
    margin-top: 3px;
    height: auto;
    width: 60%;
    word-break: break-all;
    word-wrap: break-word;
}
.sub-reply-other-box{
    margin-top: 3px;
     width: 100%;
     display: flex;
}
.sub-reply-time{
    color: #999999;
    margin-right: 20px;
    margin-left: 10px;
}
.sub-reply{
     cursor: pointer;
}
.sub-reply:hover{
     color: #fc5531;
}
.root-comment-reply-input-box{
     width: 100%;
     height: 80px;
     display: none;
}
.root-comment-input{
    width: 400px;
    height: 80px;
    border-radius: 10px;
    border: none;
    background-color: #eaeaea;
    resize: none;
    padding-left: 10px;
    padding-top: 5px;

}
.sub-reply-input{
    width: 400px;
    height: 80px;
    border-radius: 10px;
    border: none;
    background-color: #eaeaea;
    resize: none;
    padding-left: 10px;
    padding-top: 5px;
}
.root-comment-box{
    background-color: #fc5531;
    color: white;
    border-radius: 25px;
    border: none;
    width: 70px;
    height: 35px;
    text-align: center;
    font-weight: bold;
}
.sub-reply-out-box{
     width: 100%;
     height: 80px;
     display: none;
}
.sub-reply-btn{
    background-color: #fc5531;
    color: white;
    border-radius: 25px;
    border: none;
    width: 70px;
    height: 35px;
    margin-bottom: 20px;
    font-weight: bold;
}